<template>
  <div>
    <div class="listen">
      <div class="listen-top">
        <img
          src="https://m.kugou.com/ts/Public/static/img/banner_download2.png"
          alt=""
        />
        <img
          src="https://m.kugou.com/ts/Public/static/img/banner_m_rank.png"
          alt=""
        />
      </div>
      <ul class="lis-list">
          <li v-for="(item,index) in arr" :key="index">
              <a href="">{{item}}</a>
          </li>
      </ul>
      <div class="lis-con">
          <div class="con-top">
              <h3>每日推荐</h3>
              <p class="con-top-p">
                  <span>换一批</span>
                  <img src="https://m.kugou.com/ts/Public/static/img/icon_replacement.png" alt="">
              </p>
          </div>
          <ul class="con-list">
              <li v-for="(item,index) in arr1" :key="index">
                  <div class="list-i">
                    <img :src="item.imgSrc" alt="">
                    <p class="con-list-ding">
                      <img src="https://m.kugou.com/ts/Public/static/img/icon_play.png" alt="">
                      <span>{{item.evaluate}}</span>
                  </p>
                  </div>
                  <p class="con-list-p1">{{item.title}}</p>
              </li>
          </ul>
      </div>
      <div class="lis-con">
          <div class="con-top">
              <h3>有声小说</h3>
              <p class="con-top-p">
                  <span>更多</span>
                  <img src="https://m.kugou.com/ts/Public/static/img/icon_arrowdown.png" alt="" class="geng">
              </p>
          </div>
          <ul class="con-list">
              <li v-for="(item,index) in arr2" :key="index">
                  <div class="list-i">
                    <img :src="item.imgSrc" alt="">
                    <p class="con-list-ding">
                      <img src="https://m.kugou.com/ts/Public/static/img/icon_play.png" alt="">
                      <span>{{item.evaluate}}</span>
                  </p>
                  </div>
                  <p class="con-list-p1">{{item.title}}</p>
              </li>
          </ul>
      </div>
    </div>
    <div class="footer">
        <div class="foot-img">
            <img src="	https://m.kugou.com/ts/Public/static/img/logo_end.png" alt="">
        </div>
        <p class="foot-p">打开APP，听更多免费有声书！ ></p>
    </div>
  </div>
</template>
<script>
export default {
  name: "Listen",
  data(){
      return{
          arr:["有声小说","儿童天地","相声曲艺","情感生活","粤语","助眠解压","娱乐搞笑","更多"],
          arr1:[
              {
                  "imgSrc":"https://imgessl.kugou.com/stdmusic/150/20210730/20210730151953875972.jpg",
                  "evaluate":"3852.2万",
                  "title":"此生不负你情深"
              },
              {
                  "imgSrc":"https://imgessl.kugou.com/stdmusic/150/20210817/20210817153100549208.jpg",
                  "evaluate":"167.6万",
                  "title":"抗日小妖孽"
              },{
                  "imgSrc":"https://imgessl.kugou.com/stdmusic/150/20210927/20210927183539920594.jpg",
                  "evaluate":"693.9万",
                  "title":"dj舞曲 劲爆舞曲"
              },{
                  "imgSrc":"https://imgessl.kugou.com/stdmusic/150/20211026/20211026225102978136.jpg",
                  "evaluate":"290.9万",
                  "title":"郭德纲，于谦相声精选"
              },{
                  "imgSrc":"https://imgessl.kugou.com/stdmusic/150/20210722/20210722115250618380.jpg",
                  "evaluate":"1052.2万",
                  "title":"小伴龙早教儿歌"
              },{
                  "imgSrc":"https://imgessl.kugou.com/stdmusic/150/20210904/20210904054704562659.jpg",
                  "evaluate":"168.1万",
                  "title":"绝世主神"
              }
          ],
          arr2:[
              {
                  "imgSrc":"https://imgessl.kugou.com/commendpic/20220110/20220110101245111166.jpg",
                  "evaluate":"325.6万",
                  "title":"万古最强驸马"
              },
              {
                  "imgSrc":"https://imgessl.kugou.com/commendpic/20220110/20220110101301285037.jpg",
                  "evaluate":"520.2万",
                  "title":"天命风水师"
              },{
                  "imgSrc":"https://imgessl.kugou.com/commendpic/20220110/20220110101318636552.png",
                  "evaluate":"1032.2万",
                  "title":"阴阳先生的孽缘"
              },{
                  "imgSrc":"https://imgessl.kugou.com/commendpic/20220110/20220110101341973151.jpg",
                  "evaluate":"122.3万",
                  "title":"总裁每天都想宠我"
              },{
                  "imgSrc":"https://imgessl.kugou.com/commendpic/20220110/20220110101358329162.jpg",
                  "evaluate":"165.6万",
                  "title":"萌宝找上门，妈咪，请签收"
              },{
                  "imgSrc":"https://imgessl.kugou.com/commendpic/20220110/20220110101412530881.jpg",
                  "evaluate":"66万",
                  "title":"王妃从良王爷请指教"
              }
          ]
      }
  }
};
</script>
<style scoped>
.listen {
  margin-top: 2rem;
  padding: 0 0.15rem;
  box-sizing: border-box;
}
.listen-top img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  margin-bottom: 0.12rem;
}
.lis-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.lis-list li{
     width: 1.4rem;
    height: .5rem;
    margin: 0.2rem;
    background: rgba(0, 185, 255, 0.1);
    border-radius: .1rem;
}
.lis-list li a{
    display: block;
    text-align: center;
    line-height: .5rem;
    color: #4C4A4A;
    font-size: .12rem;
}
.lis-con{
    background: #fff;
    margin-bottom: .3rem;
}
.con-top{
    display: flex;
    justify-content: space-between;
    padding: .2rem 0;
}
.con-top h3{
    font-size: 16px;
}
.con-top-p{
    display: flex;
}
.con-top-p span{
    font-size: .12rem;
    margin-right: .1rem;
}
.con-top-p img{
    width: .2rem;
    height: .2rem;
    margin-top: .05rem;
}
.con-list{
    display: flex;
    flex-wrap: wrap;
}
.con-list li{
    margin: 0 .2rem .3rem .2rem;
}
.list-i{
    position: relative;
}
.list-i img{
    width: 2rem;
    height: 2rem;
    border-radius: .1rem;
}
.con-list-ding{
    position: absolute;
    bottom: 0;
    left: .1rem;
    display: flex;
    color: #fff;
    align-items: center;
    font-size: .16rem;
}
.con-list-ding img{
    width: .23rem;
    height: .23rem;
}
.con-list li .con-list-p1{
    width: 2rem;
    margin-top: .1rem;
    text-align: center;
    font-size: .14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.geng{
    transform: rotate(-90deg);
}
.footer{
    padding: 0;
    margin-top: 1.5rem;
    height: 3rem;
    background: url(https://m.kugou.com/ts/Public/static/img/bg_pageend.png) no-repeat;
    background-size: 100% 100%;
}
.foot-img{
    width: 2.6rem;
    margin-left: 50%;
    transform: translateX(-50%);
}
.foot-img img{
    width: 2.6rem;
}
.foot-p{
    border: 1px solid #1E84E4;
    color: #1E84E4;
    font-size: 12px;
    width: 4.8rem;
    height: .6rem;
    border-radius: .35rem;
    text-align: center;
    line-height: .6rem;
    margin: .2rem auto;
}
</style>
